<template>
  <div>
    <h1>Demo,{{ xxx }}</h1>
    <h1>计算属性,{{ bigXxx }}</h1>
    <h2>{{ date | format }}</h2>
    <button @click="handle">按钮</button>
    <div v-t="str"></div>
  </div>
</template>

<script>
import { hunru1, hunru2 } from './mixin'
import dayjs from 'dayjs'
export default {
  // 局部
  // 注意： 如果混入的配置和自己的配置发生冲突:
  // 1. 覆盖的情况: 自己的覆盖混入的
  // 2. 不覆盖: 先执行混入,后执行自己的
  mixins: [hunru1, hunru2],
  // 数据发生冲突,自己的数据覆盖混入的数据
  data() {
    return {
      xxx: 10,
      date: 1689999999999,
      str: '<h1>测试demo</h1>',
    }
  },
  // 函数发生冲突,会覆盖,自己的覆盖混入的
  methods: {
    handle() {
      this.xxx = this.xxx + 9
    },
  },
  // watch发生冲突,不会覆盖,先执行混入的,再执行自己的
  watch: {
    xxx() {
      alert('demo', this.xxx)
    },
  },
  // 计算属性发生冲突，会覆盖，自己的覆盖混入的
  computed: {
    bigXxx() {
      return this.xxx * 2
    },
  },
  // 指令发生冲突,自己的指令覆盖混入的指令
  directives: {
    t(element, binding) {
      console.log('demo的指令')
      element.innerHTML = binding.value
    },
  },
  // 过滤器发生冲突会覆盖,自己的覆盖混入的
  filters: {
    format(value) {
      return dayjs(value).format('HH:mm:ss')
    },
  },
  // 生命周期钩子函数发生冲突,不会覆盖,先执行混入的,后执行自己的
  mounted() {
    console.log('demo', '组件挂载了')
  },
}
</script>

<style></style>
